<template>
    <el-container>
        <el-header>
            <h2 style="text-align: center">部门管理页面</h2>
        </el-header>
        <el-main>
            <div v-show="searchToggle">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="岗位名称">
                        <el-input v-model="postData.searchPostName" placeholder="请输入岗位名称" clearable />
                    </el-form-item>
                    <el-form-item label="部门类型">
                        <el-input v-model="postData.searchPostType" placeholder="请输入部门类型" clearable />
                    </el-form-item>
                    <el-form-item label="预设岗位人数">
                        <el-input type="number" v-model="postData.searchOrganizationSize" placeholder="请输入岗位人数"
                            clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="postDataLod">查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>


            <el-button type="primary" style="margin: 10px" @click="onSubmit()">添加</el-button>
            <el-button type="primary" style="margin: 10px" @click="searchToggleAction()">{{ searchTitle }}</el-button>
            <el-dialog v-model="postData.dialogVisible" :title="postData.dialogTitle" width="35%"
                :before-close="handleClose">
                <el-form :model="postData.form" label-width="auto" style="max-width: 600px">
                    <el-form-item label="请输入岗位" prop="postName">
                        <el-input v-model="postData.form.postName" type="string" />
                    </el-form-item>
                    <el-form-item label="请输入部门类型" prop="postType">
                        <el-input v-model="postData.form.postType" type="string" />
                    </el-form-item>
                    <el-form-item label="请输入岗位人数" prop="organizationSize">
                        <el-input v-model="postData.form.organizationSize" type="number" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="postData.dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="dialogSave">
                            Confirm
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <!-- 表格 -->
            <div>
                <!-- <h2>带边框表格</h2>
                <p>.table-bordered 类可以为表格添加边框:</p> -->
                <table class="table">
                    <thead>
                        <tr>
                            <th style="width: 60px;">
                                <el-icon><Select /></el-icon>&nbsp;序号
                            </th>
                            <th style="width: 320px;">
                                <el-icon>
                                    <Reading />
                                </el-icon>&nbsp;岗位名称
                            </th>
                            <th style="width: 320px;">
                                <el-icon>
                                    <Stamp />
                                </el-icon>&nbsp;部门类型
                            </th>
                            <th style="width: 130px;">
                                <el-icon>
                                    <Avatar />
                                </el-icon>&nbsp;岗位预设人数
                            </th>
                            <!-- <th style="width: 100px;">
                                <el-icon>
                                    <Timer />
                                </el-icon>&nbsp;记录时间
                            </th> -->
                            <th>
                                <el-icon>
                                    <Tools />
                                </el-icon>&nbsp;操作
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(post) in postData.tableData" :key="post.id">
                            <td>
                                {{ post.id }}
                            </td>
                            <td>{{ post.postName }}</td>
                            <td>{{ post.postType }}</td>
                            <td>{{ post.organizationSize }}</td>
                            <!-- <td>{{ post.updateDate }}</td> -->
                            <td>
                                <el-button type="primary" @click="onSubmit(post)" :icon="Edit"></el-button>
                                <el-button type="warning" @click="remove(post.id)" :icon="Delete"></el-button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div style="margin-top: 16px; display: flex; justify-content: center;">
                    <el-pagination background layout="total, prev, pager, next" v-model:current-page="postData.pageNum"
                        v-model:page-size="postData.pageSize" :total="postData.total"
                        @current-change="handlePageChange" />
                </div>
            </div>
        </el-main>
    </el-container>

</template>

<script setup>

import { reactive, ref } from 'vue';
import { Delete, Edit, Search } from '@element-plus/icons-vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

let searchToggle = ref(false);
let searchTitle = ref('展开查询');

function searchToggleAction() {
    searchToggle.value = !searchToggle.value;
    searchTitle.value = searchToggle.value ? '收起查询' : '展开查询';
}


let postData = reactive({
    tableData: [],
    dialogVisible: false,
    dialogTitle: '',
    pageNum: 1,
    pageSize: 8,
    total: 0,
    form: {},
    searchPostName: '',
    searchPostType: '',
    searchOrganizationSize: '',
    searchUpdateDate: ''
})


const postDataLod = () => {
    // request.get(`/api/personmis/getPostByPage?pageNum=${postData.pageNum}&pagesize=${postData.pageSize}`)
    //     .then(response => {
    //         postData.tableData = response.data.posts;
    //         postData.total = response.data.total;
    //     }).catch(error => {
    //         console.log(error)
    //     })

    const searchCond = {
        postName: postData.searchPostName,
        postType: postData.searchPostType,
        organizationSize: postData.searchOrganizationSize,
        updateDate: postData.searchUpdateDate,
        currentPage: postData.pageNum,
        pageSize: postData.pageSize
    }


    request.post('/api/personmis/selectPostByCon', searchCond)
        .then(response => {
            postData.tableData = response.data.posts;
            postData.total = response.data.total;
        }).catch(error => {
            console.log(error)
        })
}

function handlePageChange() {
    postDataLod()
}
postDataLod()

function onSubmit(post = 'default') {
    postData.dialogVisible = true
    if (post == 'default') {
        postData.dialogTitle = '新增数据'
        postData.form = {}
    } else {
        postData.dialogTitle = '修改数据'
        //表中有当前值
        postData.form = post
    }
}

function dialogSave() {
    if (postData.form.id == undefined) {//添加数据
        request.post("/api/personmis/addPost", postData.form)
            .then(res => {
                if (res.code == "200") {
                    postData.dialogVisible = false
                    ElMessage.success("保存成功");
                    postData.form = {}
                    postDataLoad()
                } else {
                    ElMessage.error(res.msg);
                }
            })
            .catch((error) => {
                console.log(error);
            });
    } else {//修改数据
        request.post("/api/personmis/updatePost", postData.form)
            .then(res => {
                if (res.code == "200") {
                    postData.dialogVisible = false
                    ElMessage.success("保存成功");
                    postData.form = {}
                    postDataLoad()
                } else {
                    ElMessage.error(res.msg);

                }
            })
            .catch((error) => {
                console.log(error);
            });
    }
}

function remove(id) {
    // postData.splice(index, 1);
    //后台设置的是post 格式
    request.post('/api/personmis/deletePost/' + id)
        .then(res => {
            if (res.code == '200') {
                ElMessage.success('删除id' + id + '成功')
                postDataLod()
            } else {
                ElMessage.success(res.msg)

            }
        }).catch(error => {
            console.log(error)
        })
}
</script>

<style scoped>
.el-main {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.demo-form-inline .el-input {

    --el-input-width: 200px;
}


table {
    width: 100%;
    border-collapse: collapse;
    /* 合并边框 */
    border: 1px solid black;
    /* 表格边框 */
}

/* 表头样式 */
th {
    background-color: gray;
    /* 灰色背景 */
    color: white;
    /* 文字颜色为白色 */
    text-align: center;
    /* 文字居中 */
    padding: 10px;
    /* 内边距 */
    border: 1px solid black;
    /* 表头边框 */
}

/* 表格内容样式 */
td {
    background-color: white;
    /* 白色背景 */
    color: black;
    /* 文字颜色为黑色 */
    text-align: left;
    /* 文字左对齐 */
    padding: 10px;
    /* 内边距 */
    border: 1px solid black;
    /* 单元格边框 */
}
</style>